<template>
	<div class="toast" v-show="show">
        <p>{{text}}</p>
	</div>

</template>

<script>
export default {
  	props: {
	},
  	data () {
    	return {
            state: false,
            show: false,
            text: "这是提示信息",
            duration: 0
		}
	},
	components: {

	},
	created () {

    },
    methods: {
        setState(state) {
            this.state = state;
            this.$emit("getRectSelectedState", this.state);
        },
        toast(text = "这是提示信息", duration = 2000) {
            this.text = text;
            this.duration = duration;
            this.show = true;
            this.hide();
        },
        hide() {
            setTimeout(() => {
                this.show = false;
            }, this.duration);
        }
    },
	mounted () {

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .toast {
        position: fixed;
        max-width: 300px;
        width: auto;
        left: 0;
        right: 0;
        margin: auto;
        padding: 20px;
        line-height: 24px;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 3px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 11;
    }
    .toast>p {
        color: #fff;
    }
</style>
